<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易对方信息</span>
      </div>
      <el-form label-width="100px" inline>
        <el-form-item label="数字身份：">{{ data.other_did }}</el-form-item>
        <el-form-item label="信誉值：">{{data.other_credit}}</el-form-item>
      </el-form>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    offerer_did: "",
    saler_did: "",
    saler_credit: "",
    buyer_did: "",
    buyer_credit: ""
  };
  @Watch("data", { deep: true })
  protected init() {
    const {
      offerer_did,
      saler_did,
      saler_credit,
      buyer_did,
      buyer_credit
    } = this.data;
    if (offerer_did === saler_did) {
      this.$set(this.data, "other_did", buyer_did);
      this.$set(this.data, "other_credit", buyer_credit);
    } else {
      this.$set(this.data, "other_did", saler_did);
      this.$set(this.data, "other_credit", saler_credit);
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.fontStyle {
  color: #077be8;
  line-height: 36px;
}
.cardStyle {
  .el-card {
    background: rgba(7, 123, 232, 0.05);
    .fontStyle {
      color: #077be8;
      font-size: 16px;
      line-height: 36px;
    }
    .numberStyle {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
</style>


